<script setup lang="tsx">
import { computed, nextTick, onUnmounted, ref } from 'vue';
import { getOuterRightTableDataDetails } from '@/service/api/modules/code-management/printed-code';
import SearchBox from './modules/search.vue';

const searchParams = ref<any>({
  prodNo: null,
  lotNo: null,
  printState: null,
  time: null
});

const tableRef = ref(null);

const columnChecks = ref([
  {
    key: 'index',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true
  },
  {
    key: 'lotId',
    dataIndex: 'lotId',
    title: '生产批号',
    width: 150,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'productName',
    dataIndex: 'productName',
    title: '产品型号',
    width: 140,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'qty',
    dataIndex: 'qty',
    title: '批次数量',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'printCount',
    dataIndex: 'printCount',
    title: '打码数量',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'printedCodeState',
    dataIndex: 'printedCodeState',
    title: '打码状态',
    width: 115,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'customerCode',
    dataIndex: 'customerCode',
    title: '客户代码',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'customerName',
    dataIndex: 'customerName',
    title: '客户名称',
    width: 200,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createTime',
    dataIndex: 'createTime',
    title: '下发时间',
    width: 180,
    align: 'center',
    checked: true,
    ellipsis: true
  }
]);

function reset() {
  nextTick(() => {
    searchParams.value = {
      prodNo: null,
      lotNo: null,
      printState: null,
      time: null
    };
    search();
  });
}

function search() {
  tableRef.value.getData(1);
}

const rightTableLoading = ref(false);
const rightTableData = ref([]);
const rightTableColumns = ref([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'pnlId',
    dataIndex: 'pnlId',
    title: '外层曝光码',
    width: 180,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'printStatus',
    dataIndex: 'printStatus',
    title: '是否打码',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'printedTime',
    dataIndex: 'printedTime',
    title: '打码时间',
    width: 180,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'eqpId',
    dataIndex: 'eqpId',
    title: '打码设备',
    width: 130,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'innerCode',
    dataIndex: 'innerCode',
    title: '内层PNL码',
    width: 200,
    align: 'center',
    checked: true,
    ellipsis: true
  }
]);

function getRightTableData(lotId) {
  rightTableLoading.value = true;
  getOuterRightTableDataDetails(lotId)
    .then(({ data, error }) => {
      if (!error) {
        data.forEach((item, index) => {
          item.index = index + 1;
        });
        rightTableData.value = data;
      }
    })
    .finally(() => (rightTableLoading.value = false));
}

function handleRowClick(record) {
  getRightTableData(record.lotId);
}

function handleDataLoadSuccess(data) {
  getRightTableData(data[0].lotId);
  tableRef.value.setCurrentRowId(data[0]);
}

const searchData = computed(() => {
  const params = {
    ...searchParams.value
  };
  if (searchParams.value?.time?.[0]) {
    params.startTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD');
    params.endTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD');
  }
  delete params.time;
  return params;
});

const searchHeight = ref(42);

window.addEventListener('resize', () => {
  nextTick(() => {
    const ele = document.querySelector('.outer-printed-code .search-box');
    const height = ele?.clientHeight;
    searchHeight.value = height || 42;
  });
});

onUnmounted(() => {
  window.removeEventListener('resize', () => {});
});
</script>

<template>
  <div
    class="jl-main-page outer-printed-code h-full h-full min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto"
  >
    <SearchBox v-model:model="searchParams" class="search-box" @reset="reset" @search="search" />
    <ARow :gutter="[15, 8]" wrap class="w-full" :style="{ height: `calc(100% - ${searchHeight}px)` }">
      <ACol :span="12" class="h-full">
        <Table
          ref="tableRef"
          v-model:searchParams="searchData"
          :column="columnChecks"
          :show-row-selection="false"
          :auto-generate-uuid="false"
          row-key="lotId"
          :scroll="{ y: 'auto' }"
          is-init-get-data
          url="/mes/printCode/outer/inner/list"
          class="h-full"
          @table-row-click="handleRowClick"
          @table-data-load-sucess="handleDataLoadSuccess"
        ></Table>
      </ACol>
      <ACol
        :span="24"
        :md="24"
        :lg="24"
        :xl="12"
        :xxl="12"
        class="h-fullmin-h-500px h-full flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto"
      >
        <ACard
          :bordered="false"
          :body-style="{ flex: 1, overflow: 'hidden' }"
          class="table-card h-full flex-col-stretch sm:flex-1-hidden card-wrapper"
        >
          <template #extra>
            <TableColumnSetting v-model:columns="rightTableColumns" />
          </template>
          <STable
            ref="tableWrapperRef"
            :columns="rightTableColumns"
            :data-source="rightTableData"
            bordered
            size="small"
            :loading="rightTableLoading"
            row-key="pnlId"
            :pagination="false"
            :scroll="{ x: 'auto', y: 2000 }"
            class="h-full"
            :row-height="23"
          />
        </ACard>
      </ACol>
    </ARow>
  </div>
</template>

<style lang="scss" scoped></style>
